<!--
 * @Author: lihaogn
 * @Date: 2021-09-24 20:15:37
 * @LastEditTime: 2022-05-15 17:52:17
 * @LastEditor: lihaogn
 * @Description: 样式试验
 * @FilePath: \lix-vue2-demos\src\views\demo\vue\style\index.vue
-->
<template>
  <div>
    <!-- 动态样式 -->
    <div>
      <span :class="{ bold: isBold, 'red-text': isRed, 'size-16': isSize16 }">
        测试动态样式-class-1
      </span>
      <span :class="class2">
        测试动态样式-class-2
      </span>
      <span :class="[boldClass, redClass, sizeClass]">
        测试动态样式-class-3
      </span>
      <span :class="[boldClass, redClass, 'size-16']">
        测试动态样式-class-3.1
      </span>
      <span :class="[isBold ? boldClass : '', { redClass: isRed }, sizeClass]">
        测试动态样式-class-4
      </span>
      <br />
      <span
        :style="{ color: mColor, fontWeight: mFontWeight, fontSize: mFontSize }"
      >
        测试动态样式-style-1
      </span>
      <span :style="styleObj">
        测试动态样式-style-2
      </span>
      <span :style="[colorStyleObj, fontStyleObj]">
        测试动态样式-style-3
      </span>
      <span :style="[isRed ? colorStyleObj : { color: 'blue' }, fontStyleObj]">
        测试动态样式-style-4
      </span>
      <span :style="isRed ? { color: mColor } : { color: 'green' }">
        测试动态样式-style-5
      </span>
    </div>
    <el-divider></el-divider>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isBold: true,
      isRed: false,
      isSize16: true,
      class2: {
        bold: true,
        'red-text': true,
        'size-16': false
      },
      boldClass: 'bold',
      redClass: 'red-text',
      sizeClass: 'size-16',
      mColor: 'blue',
      mFontWeight: 'bold',
      mFontSize: '16px',
      styleObj: {
        color: 'green',
        fontWeight: 'bold',
        fontSize: '16px'
      },
      colorStyleObj: {
        color: 'red'
      },
      fontStyleObj: {
        fontWeight: 'bold',
        fontSize: '16px'
      }
    }
  }
}
</script>
<style lang="less" scoped>
.bold {
  font-weight: bold;
}
.red-text {
  color: red;
}
.size-16 {
  font-size: 16px;
}
</style>
